// 这里的代码是最终是node去解析

console.log(111)
const path = require('path')

// npm install html-webpack-plugin --save-dev
const htmlplugin = require('html-webpack-plugin')

// npm install webpack --save-dev
const webpack = require('webpack')
const obj = {
  entry:'./src/main.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module:{
    loaders:[
    {
      // npm install css-loader style-loader --save-dev
      // 对css进行处理
      test:/\.css$/,
      loader:'style-loader!css-loader'

    },
    {
      // npm install less-loader less --save-dev
       // 对less进行处理
      test:/\.less$/,
      loader:'style-loader!css-loader!less-loader'
    },
    // {
    //   // npm install sass-loader node-sass --save-dev
    //    // 对sass进行处理,sass的文件后缀是scss
    //   test:/\.scss$/,
    //   loader:'style-loader!css-loader!sass-loader'
    // },
    {
      // npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
       // 对es6及react语法进行处理
      test:/\.js$/,
      // 匹配所有的js,将js中的es6及react语法转换为es5

      // exclude用来忽略文件夹的
      // babel-loader会忽略node_modules文件夹中的文件!
      exclude:/(node_modules)/,
      loader:'babel-loader'
      // 如果用了babel-loader需要在webpack.config.js所在目录新建
      // .babelrc文件, 还支持转换es7
    },
    {
      // npm install file-loader --save-dev
       // 对css进行处理
      test:/\.(jpg|jpeg|bmp|png|gif|ico)$/,

      // ?name=./img/[name].[ext] 表示把图片复制到dist目录中的
      // img目录中,文件名保持和原文件名一致

      // ?name=./img/[name].[ext]?[hash]
      // 表示会将原来代码中对图片的引入url中加入随机的值
      // 原来: url('./a.jpg')
      // 处理后: url('./a.jpg?slfkdaljfalskdfaf')

      loader:'file-loader?name=./img/[name].[ext]?[hash]'
    },
    {
      test:/\.(ttf|eot|svg|woff|woff2)$/,
      loader:'file-loader?name=./fonts/[name].[ext]?[hash]'
    }
    ]
  },
  plugins:[

  // 自动复制html并引入bundle.js
   new htmlplugin({
    template:'./index.html'
   }),

   // 压缩js代码
   // 或者 webpack -p 也可以压缩
   new webpack.optimize.UglifyJsPlugin(),

   // 将引用的包里的变量，变量全局变量
   // 
   new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $:'jquery'
   })
  ]
}

module.exports = obj


// 所有需要下载的包
// npm install html-webpack-plugin webpack style-loader css-loader less-loader less sass-loader node-sass file-loader babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

